import { Card, Button, Modal } from 'flowbite-react'
import { FaBook, FaPlus } from 'react-icons/fa'

export default function CardList({
  show,
  onClose,
  selectedDeck,
  deckCards,
  onEditCard,
  onDeleteCard,
  onAddCard,
  formatDate
}) {
  return (
    <Modal
      show={show}
      onClose={onClose}
      size="7xl"
      className="max-h-[90vh]"
    >
      <Modal.Header className="border-b">
        <div className="flex items-center gap-3">
          <FaBook className="text-blue-500 text-xl" />
          <div>
            <h3 className="text-xl font-bold">{selectedDeck?.name}</h3>
            <p className="text-sm text-gray-500 mt-1">共 {deckCards.length} 张卡片</p>
          </div>
        </div>
      </Modal.Header>
      <Modal.Body className="max-h-[calc(90vh-12rem)] overflow-y-auto">
      <div className="grid grid-cols-1 md:grid-cols-2  gap-6 p-2">
            {deckCards.length === 0 ? (
              <div className="col-span-3 text-center py-12">
                <div className="text-gray-400 text-6xl mb-4">
                  <FaBook className="mx-auto" />
                </div>
                <p className="text-gray-500 text-lg">暂无卡片</p>
                <Button
                  color="blue"
                  size="sm"
                  className="mt-4"
                  onClick={() => {
                      onClose(false)
                      onAddCard(selectedDeck)
                  }}
                >
                  <FaPlus className="mr-2" />
                  添加第一张卡片
                </Button>
              </div>
            ) : (
              deckCards.map((card, index) => (
                <Card key={card.id} className="hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-start mb-3">
                    <div className="flex items-center gap-2">
                      <span className="text-lg font-bold text-gray-400">#{index + 1}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        size="xs"
                        color="gray"
                        onClick={() => onEditCard(card)}
                      >
                        编辑
                      </Button>
                      <Button
                        size="xs"
                        color="failure"
                        onClick={() => onDeleteCard(card.id)}
                      >
                        删除
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-3">
                    <div>
                      <div className="font-medium text-gray-700 mb-2 flex items-center gap-2">
                        <span>问题</span>
                        <div className="h-px bg-gray-200 flex-1"></div>
                      </div>
                      <div
                        className="bg-gray-50 p-3 rounded-lg max-h-32 overflow-y-auto"
                        dangerouslySetInnerHTML={{ __html: card?.front || '' }}
                      />
                    </div>

                    <div>
                      <div className="font-medium text-gray-700 mb-2 flex items-center gap-2">
                        <span>答案</span>
                        <div className="h-px bg-gray-200 flex-1"></div>
                      </div>
                      <div
                        className="bg-gray-50 p-3 rounded-lg max-h-32 overflow-y-auto"
                        dangerouslySetInnerHTML={{ __html: card?.back || '' }}
                      />
                    </div>
                  </div>

                  <div className="mt-3 pt-3 border-t">
                    <div className="text-xs text-gray-500">创建于：{formatDate(card?.created)}</div>
                    <div className="text-xs text-gray-500 mt-1">下次复习：{formatDate(card?.nextReview)}</div>
                  </div>
                </Card>
              ))
            )}
          </div>
      </Modal.Body>
      <Modal.Footer className="border-t">
        <div className="flex justify-between w-full">
          <Button color="gray" onClick={onClose}>关闭</Button>
          <Button color="blue" onClick={() => onAddCard(selectedDeck)}>
            <FaPlus className="mr-2" />
            添加新卡片
          </Button>
        </div>
      </Modal.Footer>
    </Modal>
  )
}